<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="box">
        <h3>请选择你喜欢的专栏</h3>
        <div>
            <label v-for="(item,index) in arr" :key="index">
                <input v-model="strArr" type="checkbox" :value="item">{{item}}
            </label>
        </div>

        <ul>
            <li v-for="(item,index) in strArr" :key="index">{{item}}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 基于arr的数据，利用vue 实现动态的渲染界面
        const app = new Vue({
            el: '#box',
            data: {
                id: 1,
                arr: ['科幻', '喜剧', '动漫', '冒险', '科技', '军事', '娱乐', '奇闻'],
                //用于存储点击之后的值
                strArr: []
            }, methods: {
                fn() {
                    // 获取输入框后面的值
                    const value = this.$refs.input.value;
                    // const val = this.value;
                    console.log(val);

                }
            }
        })
    </script>
</body>

</html>